<template>
  <Layout>
    <PageHeader :title="title"></PageHeader>
    <div class="row">
      <div class="col-lg-12">
        <div class="card">
          <div class="card-body">
            <div class="row">
              <div class="col-md-3">
                <div class="media">
                  <div class="avatar-sm mr-3">
                    <span
                      class="
                        avatar-title
                        bg-light
                        rounded-circle
                        text-primary
                        font-size-24
                      "
                    >
                      <i class="ri-checkbox-circle-line"></i>
                    </span>
                  </div>
                  <div class="media-body align-self-center overflow-hidden">
                    <h5>205个</h5>
                    <p class="mb-0">最新客户总数量</p>
                  </div>
                </div>
              </div>
              <div class="col-md-3">
                <div class="media mt-4 mt-md-0">
                  <div class="avatar-sm mr-3">
                    <span
                      class="
                        avatar-title
                        bg-light
                        rounded-circle
                        text-primary
                        font-size-24
                      "
                    >
                      <i class="ri-database-2-line"></i>
                    </span>
                  </div>
                  <div class="media-body align-self-center overflow-hidden">
                    <h5>2.5 TB</h5>
                    <p class="mb-0">使用存储数据量</p>
                  </div>
                </div>
              </div>
              <div class="col-md-3">
                <div class="media mt-4 mt-md-0">
                  <div class="avatar-sm mr-3">
                    <span
                      class="
                        avatar-title
                        bg-light
                        rounded-circle
                        text-primary
                        font-size-24
                      "
                    >
                      <i class="ri-funds-line"></i>
                    </span>
                  </div>
                  <div class="media-body align-self-center overflow-hidden">
                    <h5>9个</h5>
                    <p class="mb-0">本月新增客户数</p>
                  </div>
                </div>
              </div>
              <div class="col-md-3">
                <div class="media mt-4 mt-md-0">
                  <div class="avatar-sm mr-3">
                    <span
                      class="
                        avatar-title
                        bg-light
                        rounded-circle
                        text-primary
                        font-size-24
                      "
                    >
                      <i class="ri-align-vertically"></i>
                    </span>
                  </div>
                  <div class="media-body align-self-center overflow-hidden">
                    <h5>192个</h5>
                    <p class="mb-0">调用接口数量</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="card">
          <div class="card-body">
            <div class="all-products">
              最新客户清单
            </div>
            <div class="states-type">
              <span class="type-title">客户类型:</span>
              <button
                type="button"
                class="btn btn-light rounded-pill btn-sm states-type-item"
                :class="{ isActive: reptileChange == item.index }"
                v-for="item in reptiletype"
                :key="item.index"
                @click="reptile(item)"
              >
                {{ item.name }}
              </button>
            </div>
            <div class="states-time">
              <div>
                <span class="time-title">当前状态:</span>
                <button
                  type="button"
                  class="btn btn-light rounded-pill btn-sm states-time-item"
                  :class="{ isActive: stateChange == item.index }"
                  v-for="item in states"
                  :key="item.index"
                  @click="statesItem(item)"
                >
                  {{ item.type }}
                </button>
              </div>
            </div>
            <Transaction />
          </div>
        </div>
      </div>
    </div>
  </Layout>
</template>
<script>
import Layout from "../../layouts/main";
import PageHeader from "@/components/page-header";
import Transaction from "./transaction";
export default {
  components: { Layout, PageHeader, Transaction },
  data () {
    return {
      title: "客户管理",

      // 客户行业
      reptiletype: [
        {
          name: "金融",
          index: 1,
        },{
          name: "教育",
          index: 2,
        },{
          name: "电力",
          index: 3,
        },{
          name: "传媒",
          index: 4,
        },{
          name: "医疗",
          index: 5,
        },{
          name: "服务",
          index: 6,
        },{
          name: "运营商",
          index: 7,
        },{
          name: "政府",
          index: 8,
        },{
          name: "软件",
          index: 9,
        },{
          name: "制药",
          index: 10,
        },{
          name: "生物",
          index: 11,
        }
      ],
      reptileChange: 1,
      //类型筛选
      states: [
        {
          type: "全部",
          index: 1,
        },
        {
          type: "合作中",
          index: 2,
        },
        {
          type: "已终止",
          index: 3,
        },
        {
          type: "试运行",
          index: 4,
        }
      ],
      stateChange: 1,
    }
  },
  methods: {
    // 爬虫类型
    reptile(item) {
      this.reptileChange = item.index;
    },
    //类型筛选
    statesItem(item) {
      this.stateChange = item.index;
    },
  }
}
</script>
<style lang="scss" scoped>
.row{
  .col-md-3{
    .media{
      border-right: 1px solid #eeeeee;
    }
  }
  .col-md-3:last-child{
    .media{
      border-right: 0;
    }
  }
}
.isActive {
  color: #fff;
  background-color: #5664d2;
}
.all-products {
  font-size: 15px;
  font-weight: bold;
}
.states-type {
  margin-top: 20px;
  .type-title {
    display: inline-block;
    color: #74788d;
    padding-right: 10px;
  }
  .states-type-item {
    font-size: 12px;
    margin: 0 10px;
    padding-left: 8px;
    padding-right: 8px;
    min-width: 70px;
    &:hover {
      cursor: pointer;
    }
  }
}
.states-time {
  margin-top: 20px;
  margin-bottom: 20px;
  .time-title {
    display: inline-block;
    color: #74788d;
    padding-right: 10px;
  }
  .states-time-item {
    font-size: 12px;
    margin: 0 10px;
    padding-left: 16px;
    padding-right: 16px;
    min-width: 70px;
    &:hover {
      cursor: pointer;
    }
  }
}
</style>
